

<!--材料详情-->
<div class="container _container">
    <div class="_res">
        <div class="row">
            <div class="col-xs-12 col-sm-8 col-lg-8">
                <!--左边-->
                <div class="_res-left">
                    <h4 class="_res-name">{{detailinfro.name}}</h4>
                    <div class="_res-place">
                        <div>
                            <a >{{detailinfro.catename}}</a>
                        </div>
                        <div>{{detailinfro.id}}</div>
                        <div>
                            <a>{{detailinfro.city}}</a>
                        </div>
                        <div>
                            <a routerLink="/linkFactory">{{detailinfro.factory}}</a>
                        </div>
                    </div>
                    <div class="_res-bigimg">
                        <img [src]="detailinfro.url" id="bigImg" />
                    </div>
                    <div class="_res-intro">{{detailinfro.description}}</div>
                    <div class="_res-tab res-t">
                      <tabset [justified]="true">
                        <tab *ngFor="let detailname of detailinfro.attrtree" [heading]="detailname.name">
                          <ul>
                            <li *ngFor="let sons of detailname.son"><span [ngClass]="{bacolor: sons.status}"></span>{{sons.name}}</li>
                          </ul>
                        </tab>
                      </tabset>
                    </div>

                    <!--添加到我的收藏夹-->
                    <div class="_res-heart">
                        <a (click)="colltlist();lgModal.show()"><i class="fa fa-heart" aria-hidden="true"></i>＋添加到我的收藏夹</a>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-4 col-lg-4">

                <!--右边-->
                <div class="_res-right">
                    <ul class="_res-smallimg">
                        <li class="_res-arrow-up"><i class="fa fa-angle-up" aria-hidden="true"></i></li>
                        <li class="_res-img" *ngFor="let urlss of detailinfro.urls"><img [src]="urlss" width="100px" height="100px" /></li>
                      <li class="_res-img"><img src="assets/img/resource/11.png" width="100px" height="100px" /></li>
                      <li class="_res-img"><img src="assets/img/resource/1.jpg" width="100px" height="100px" /></li>
                      <li class="_res-img"><img src="assets/img/resource/2.jpg" width="100px" height="100px" /></li>
                      <li class="_res-img"><img src="assets/img/resource/3.jpg" width="100px" height="100px" /></li>
                      <li class="_res-img"><img src="assets/img/resource/4.jpg" width="100px" height="100px" /></li>
                        <li class="_res-arrow-down"><i class="fa fa-angle-down" aria-hidden="true"></i></li>
                    </ul>
                    <h5 class="_res-tag-title">关键词标签</h5>
                    <ul class="_res-tag">
                        <li>
                            <a >设计师</a>
                        </li>
                        <li>
                            <a >试验</a>
                        </li>
                        <li>
                            <a >涂鸦</a>
                        </li>
                        <li>
                            <a >表面材料</a>
                        </li>
                        <li>
                            <a >釉料</a>
                        </li>
                        <li>
                            <a >涂搪</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 添加收藏Modal -->
<div class="modal fade _collect-modal" bsModal #lgModal="bs-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">选择一个收藏夹</h4>
                <p class="modal-tip">您已经在
                    <a  target="_blank">金属光泽</a>收藏夹收藏了哦</p>
            </div>
            <div class="modal-body">
                <div class="_collect-add">
                    <!--<p data-toggle="collapse" data-target="#add" aria-expanded="true" aria-controls="add"><i class="fa fa-plus" aria-hidden="true"></i> 创建一个收藏夹</p>-->
                    <div id="add" class="collapse">
                        <form class="form-horizontal _form" role="form" onsubmit="return checkForm()">
                            <div>
                                <p class="form-error"></p>
                                <input type="text" class="form-control" id="Name" name="Name" placeholder="名字">
                            </div>
                            <div class="form-btn text-right">
                                <button type="submit" class="btn btn-submit" style="width: 60px;">创建</button>
                            </div>
                        </form>
                    </div>
                </div>
                <p class="_list-all">所有收藏夹</p>
                <ul class="_list" style="display: block">
                    <li  *ngFor=" let mat of collectinfro.data" (click)="addcoll(mat.id,detailinfro.id);lgModal.hide()">{{mat.collect_name}}</li>
                    <!--<li>透明</li>-->
                    <!--<li class="active">金属规则</li>-->
                    <!--<li>编制结构</li>-->
                    <!--<li>刺绣</li>-->
                    <!--<li>雕版</li>-->
                    <!--<li>编制结构</li>-->
                    <!--<li>刺绣</li>-->
                    <!--<li>雕版</li>-->
                    <!--<li>编制结构</li>-->
                    <!--<li>刺绣</li>-->
                    <!--<li>雕版</li>-->
                </ul>
            </div>
        </div>
    </div>
</div>
